<!-- 头部导航-->
<template>
	<div class="top-header">
		<!-- 引入收缩弹出按钮 sidebar的状态 替换sidebar.opened 菜单是否打开-->
		<collapse id="collapse_container" :is-active="sidebar" @toggleClick="toggleSideBar" class="collapse_container"></collapse>
		<!-- 引入面包屑 -->
		<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
		<!-- 引入右侧菜单 -->
		<head-right class="header-index-right"></head-right>
	</div>
</template>

<script>
import { mapGetters,mapActions } from 'vuex'
import Collapse from '../collapse/'
import Breadcrumb from '../breadcrumb/'
import HeadRight from './head-right'

export default{
	name:'GlobalHeader',
	components:{
		Collapse,
		Breadcrumb,
		HeadRight
	},
	computed:{
		...mapGetters([
			'sidebar'
		]),
		...mapActions([
			'ToggleCollapse'
		])
	},
	methods:{
		toggleSideBar() {
			console.log("切换")
			this.$store.dispatch('ToggleCollapse',!this.sidebar)
		}
	}
	
}
</script>

<style>
.top-header{
	position: relative;
	line-height:50px;
	
}	
	
.collapse_container{
	line-height: 46px;
	height: 100%;
	float: left;
	cursor: pointer;
	transition: background .3s;
	-webkit-tap-highlight-color:transparent;
	&:hover {
		background: rgba(0, 0, 0, .025)
	}
}

.breadcrumb-container{
	float: left;
}
.header-index-right{
	float: right;
}
</style>
